<template>
	<div class="home">
		<div id="charts" ref="charts" style="width:400px;height:300px">

		</div>
	</div>
</template>
<script>
	import {
		row2Col
	} from '@/utils'
	export default {
		data() {
			return {
				charts: null,
				options: {
					title: {
						text: 'ECharts'
					},
					tooltip: {},
					legend: {
						data: ['销量', '价格']
					},
					xAxis: {
						data: []
					},
					yAxis: {}
				}
			}
		},
		mounted() {
			this.charts = this.echarts.init(this.$refs['charts']);
			
			this.initChartsOption()
		},
		methods: {
			initChartsOption() {
				setTimeout(() => {
					let data = [{
							product: "衬衫",
							sale: 5,
							price: 10
						},
						{
							product: "羊毛衫",
							sale: 10,
							price: 30
						},
						{
							product: "雪纺衫",
							sale: 30,
							price: 60
						},
						{
							product: "裤子",
							sale: 20,
							price: 90
						},
						{
							product: "高跟鞋",
							sale: 18,
							price: 40
						},
						{
							product: "袜子",
							sale: 5,
							price: 100
						}
					];
					// x轴处理
					let obj = row2Col(data,'product',"产品");
					console.log(obj);
					this.options.xAxis.data = obj.data;
					// 定义 销量
					let _s1 = row2Col(data,"sale","销量");
					let s1 = {
						name:_s1.title,
						data:_s1.data,
						type:"bar"
					}
					let _s2 = row2Col(data,"price","价格");
					let s2 = {
						name:_s2.title,
						data:_s2.data,
						type:"bar"
					}
					// 定义series
					this.options.series = [s1,s2];
					this.charts.setOption(this.options);
				}, 1000);
			}
		}
	}
</script>
